<!doctype html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>人脸测温系统</title>
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="/css/default.css"/>
    <link rel="stylesheet" type="text/css" href="/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="/css/nav.css"/>
    <link rel="stylesheet" type="text/css" href="/css/nav-component.css"/>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <link rel="stylesheet" href="/css/comon0.css">
    <script>
        $(window).load(function () {
            $(".loading").fadeOut()
        })


        $(document).ready(function () {
            let whei = $(window).width()
            $("html").css({fontSize: whei / 20})
            $(window).resize(function () {
                let whei = $(window).width()
                $("html").css({fontSize: whei / 20})
            });
        });
    </script>


</head>
<body>
<div class="loading">
    <div class="loadbox"><img src="/images/loading.gif"> 页面加载中...</div>
</div>
<div class="head" style="height: 80px;">
    <div class="logog"><img src="/images/logo1.png" width="150px"/>
        <!--<span style="font-size: 36px; height: 40px;color: #FFFFFF;line-height: 40px; position: relative;top: -10px;">宇豪科技</span>-->
    </div>
    <h1 style="display: inline;position: relative;top: 20px;">人脸测温系统大屏展示</h1>
    <div class="weather"><!--<img src="images/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall m-l-20" style="height: 3.2rem">
                <div class="alltitle">今日通行人数</div>
                <div class="allnav">
                    <div style="font-size: 60px;margin-top: 50px; color: #00FFFF;">
                        <!--<input id="total">input>-->
                        <span id="total"></span>
                    </div>
                </div><!--id="echart1"-->
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="map">
                <div class="map1"><img src="/images/lbx.png"></div>
                <div class="map2"><img src="/images/jt.png"></div>
                <div class="map3"><img src="/images/map.png">
                </div>
                <div class="map4" id="map_1"></div>
            </div>
        </li>
        <li>
            <div class="boxall m-r-20" style="height: 3.2rem">
                <div class="alltitle">体温异常人数</div>
                <div class="allnav">
                    <div style="font-size: 60px;margin-top: 50px; color: #00FFFF;">
                        <span id="alarm"></span>
                    </div>
                </div><!--id="echart1"-->
                <div class="boxfoot"></div>
            </div>
        </li>

    </ul>
</div>

<!--弹框显示最新信息-->
<div id="popup" class="elastic">

</div>
<!--历史访问记录-->
<div class="his_images m-center">

</div>
<div class="nav-container">
    <ul id="cbp-tm-menu" class="cbp-tm-menu">
        <li>
            <h2><a href="/admin/index" style="font-size: 14px;">管理页面</a></h2>
        </li>
        <li>
            <h2><a style="font-size: 14px;" id="open">手动开门</a></h2>
        </li>
    </ul>
</div>
<div class="back"></div>
</body>

<script type="text/javascript" src="/js/nav-modernizr.custom.js"></script>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing-1.3.min.js"></script>
<script type="text/javascript" src="/js/prefixfree-1.0.7.js"></script>
<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script th:inline="javascript">
$(function () {
    layui.use(['jquery', 'layer'], function () {
        let layer = layui.layer;
        let t = null;
        t = setTimeout(time, 1000);

        function time() {
            clearTimeout(t);
            let dt = new Date();
            let y = dt.getFullYear();
            let mt = dt.getMonth() + 1;
            let day = dt.getDate();
            let h = dt.getHours();
            let m = dt.getMinutes();
            let s = dt.getSeconds();
            document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日-" + h + "时" + m + "分" + s + "秒";
            t = setTimeout(time, 1000);
        }

        $("#open").click(function(){
            $.ajax({
                url: `/openDoor`,
                type: `post`,
                dataType: `json`,
                success: function (msg) {
                    console.log(msg);
                    if (msg.code == 200) {
                        layer.msg('开启成功');
                    }else{
                        layer.msg('开启失败');
                    }
                }
            })
        });

        /** 添加图片 */
        let his_images = "", count = 10;
        let his_person = new Array(10);
        for (let i = 1; i <= count; i++) {
            his_images += '<div class="inline hisimg"><img src="http://localhost/upload/' + i + '.jpg" height="100px" alt=""><br/><span>36.6</span>&nbsp;<span>℃</span></div>';
            let person = new Object();
            person.snappic = "http://localhost/upload/" + i + ".jpg";
            person.temp = 36.6;
            his_person[i - 1] = person;
        }
        $(".his_images").html(his_images);


        //获取最新信息
        function getInfo() {
            $("#popup").fadeOut("slow"); //隐藏
            his_images = "";
            for (let i = 0; i < 10; i++) {
                his_images += '<div class="inline hisimg"><img src="' + his_person[i].snappic + '" height="150px" alt=""><br/>' +
                    '<span>' + his_person[i].temp + '</span>&nbsp;<span>℃</span></div>';
            }
            $("#popup").html(null);
            $(".his_images").html(his_images);
        }

        //加载数据
        function loadData() {
            $.ajax({
                url: `/getLastVerifyPush`,
                type: `get`,
                dataType: `json`,
                success: function (msg) {
                    console.log(msg);
                    document.getElementById("total").innerHTML = msg.total + "";
                    document.getElementById("alarm").innerHTML = msg.alarm + "";
                    if (msg.code == 200) {
                        let person = new Object();
                        person.snappic = msg.snappic;
                        person.temp = msg.temp;
                        for (let i = 9; i > 0; i--) {
                            his_person[i] = his_person[i - 1];
                        }

                        his_person[0] = person;
                        $(".elastic").html('<div class="info"><b><span id="pname" class="col-w">' + msg.name + '</span>&emsp;' +
                            '<span id="temper" class="col-w">' + msg.temp + '</span>&nbsp;<span class="col-w">℃</span></b></div>' +
                            '<div class="head"><img src="' + msg.snappic + '" width="250px" height="250px" /></div>');
                        $("#popup").show();
                    } else {
                        getInfo();
                    }
                }
            });
        }

        $("#popup").hide();
        setInterval(loadData, 5000);
    });
});
</script>

</html>